<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css float</title>
    <style>
        img.floatRight{
            float: right;
        }

        /*设置了 内外边距  和 宽度 还有蚊子*/
        img.marginFloatRight{
            float: right;
            border: 1px dotted black;
            margin: 0px 0px 30px 50px;
        }

        div.imgText{
            float: left;
            border: 1px dotted black;
            margin: 0px 0px 30px 50px;
            padding: 15px;
            text-align: center;
            width: 120px;
        }

        /*   段落的 首字母大写  */
        span.firstLetterBig{
            float: left;
            width: 0.7em;
            font-size: 400%;
            font-family: algerian,Courier;
            line-height: 80%;
        }

        ul.horizontal_ul{
            float: left;
            width: 100%;
            padding: 0px;
            margin: 0px;
            list-style-type: none;
        }

        li{
            display: inline;
        }

        li a:hover{
            background-color: #ff3300;
        }

        li a{
            float: left;
            width: 7em;
            text-decoration: none;
            color: white;
            background-color: purple;
            padding: 0.2em 0.6em;
            border-right: 1px solid #ff0000;
        }

        /*  */
        div.container{
            /*width: 100%;*/   /*  width : 100 % 会影响 margin 的大小*/
            margin: 20px;
            /*margin-right: 20px;*/
            border: 1px solid gray;
            line-height: 150%;
        }

        div.header, div.footer{
            padding: 0.5em;
            color: white;
            background-color: gray;
            clear: left;
        }

        h1.header{
            padding: 0px;
            margin: 0px;
        }


        div.left{
            float: left;
            width: 160px;  /*  其实 div.left 确实是 把 right 遮住了只是 */
            /*height: 300px;*/
            margin: 0px;
            padding: 1em;
            background-color: #8235bd;
        }


        /*   这个问题是为啥这个 div*/
        div.right{
            margin-left: 200px;  /* 这个left  值 要大于  160 才有用*/
            border-left: 2px solid #ff0000;  /*其实可以设置中间的 间隔线 */
            padding: 1em;
            background-color: #7a991a;
            /*float: left;*/
            /*overflow: hidden;*/
            /*float: left;*/
        }

    </style>
</head>
<body>

    <!--
    所有主流浏览器都支持 float 属性。
    注释：任何的版本的 Internet Explorer （包括 IE8）都不支持属性值 "inherit"。
    默认值:none
    继承性:no
    -->
    <p>在下面的段落中，我们添加了一个样式为 <b>float:right</b> 的图像。结果是这个图像会浮动到段落的右侧。</p>
    <p>
        <img class="floatRight" src="../images/eg_merglobe.gif" />
        This is some text. This is some text. This is some text.
        This is some text. This is some text. This is some text.
        This is some text. This is some text. This is some text.
        This is some text. This is some text. This is some text.
        This is some text. This is some text. This is some text.
        This is some text. This is some text. This is some text.
        This is some text. This is some text. This is some text.
        This is some text. This is some text. This is some text.
        This is some text. This is some text. This is some text.
        This is some text. This is some text. This is some text.
    </p>

    <p>在下面的段落中，图像会浮动到右侧，并且添加了点状的边框。我们还为图像添加了边距，这样就可以把文本推离图像：上和右外边距是 0px，下外边距是 30px，
        而图像左侧的外边距是 50px。</p>
    <p>
        <img class="marginFloatRight" src="../images/eg_merglobe.gif" />
        This is some text. This is some text. This is some text.
        This is some text. This is some text. This is some text.
        This is some text. This is some text. This is some text.
        This is some text. This is some text. This is some text.
        This is some text. This is some text. This is some text.
        This is some text. This is some text. This is some text.
        This is some text. This is some text. This is some text.
        This is some text. This is some text. This is some text.
        This is some text. This is some text. This is some text.
        This is some text. This is some text. This is some text.
    </p>  <!--  可以看出确实是宽了 很多 -->

    <!-- !!! 注意这个float 和上面的 区别是由于这个 是div 是float -->
    <div class="imgText">
        <img src="../images/eg_merglobe.gif" /><br />
        CSS is fun!
    </div>
    <div>
        div text test . this is div test . this is div test
        div text test . this is div test . this is div test
        div text test . this is div test . this is div test
        div text test . this is div test . this is div test
        div text test . this is div test . this is div test
        div text test . this is div test . this is div test
        div text test . this is div test . this is div test
        div text test . this is div test . this is div test
    </div>
    <p>
        This is some text. This is some text. This is some text.
        This is some text. This is some text. This is some text.
        This is some text. This is some text. This is some text.
        This is some text. This is some text. This is some text.
        This is some text. This is some text. This is some text.
        This is some text. This is some text. This is some text.
        This is some text. This is some text. This is some text.
        This is some text. This is some text. This is some text.
        This is some text. This is some text. This is some text.
        This is some text. This is some text. This is some text.
        This is some text. This is some text. This is some text.
        This is some text. This is some text. This is some text.
        This is some text. This is some text. This is some text.
    </p>

    <!-- 测试使得段落的首字母大写  -->
    <p> <span class="firstLetterBig">T</span>his is some text.
        This is some text. This is some text.
        This is some text. This is some text. This is some text.
        This is some text. This is some text. This is some text.
        This is some text. This is some text. This is some text.
        This is some text. This is some text. This is some text.
        This is some text. This is some text. This is some text.
        This is some text. This is some text. This is some text.
    </p>

    <!-- 创建水平菜单 除了使用 table 等控件我们也可以使用 float 来实现 这种水平的菜单 -->

    <ul class="horizontal_ul">
        <li><a href="#">Link one</a></li>
        <li><a href="#">Link two</a></li>
        <li><a href="#">Link three</a></li>
        <li><a href="#">Link four</a></li>
    </ul>
    <p>
        在上面的例子中，我们把 ul 元素和 a 元素浮向左浮动。li 元素显示为行内元素（元素前后没有换行）。
        这样就可以使列表排列成一行。ul 元素的宽度是 100%，列表中的每个超链接的宽度是 7em（当前字体尺寸的 7 倍）。
        我们添加了颜色和边框，以使其更漂亮。
    </p>

    <!--  创建无表格的首页 -->
    <div class="container">
        <div class="header"><h1 class="header">W3School.com.cn</h1></div>
        <div class="left"><p>"Never increase, beyond what is necessary, the number
            of entities required to explain anything." William of Ockham (1285-1349)</p></div>
        <div class="right"><h2>Free Web Building Tutorials</h2>
            <p>At W3School.com.cn you will find all the Web-building tutorials you need,
                from basic HTML and XHTML to advanced XML, XSL, Multimedia and WAP.</p>
            <p>W3School.com.cn - The Largest Web Developers Site On The Net!</p></div>
        <div class="footer">Copyright 2008 by YingKe Investment.</div>
    </div>
</body>
</html>